<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件与模块</title>
  </head>
  <body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
      const vdom = <h1>我是一条标题</h1>

      ReactDOM.render(vdom, document.getElementById('test'))

      // 解析：
      // 模块：只是单纯的 JS 代码的封装
      // 组件：一个完整区块的组合，如导航栏的头部区域（HTML、CSS、JS、Img、font等）
      // 模块化：多以模块拼接组合的应用
      // 组件化：多以组件拼接组合的应用
    </script>
  </body>
</html>
